<template>
	<div class="member">
    <div class="member-header">
      <van-search class="member-searchs" style="background: #F2F2F2;border:1px solid #F2F2F2;"
                  v-model="value"
                  show-action
                  placeholder="请输入姓名/手机号"
      >
        <div slot="action" v-if="!searchStatus"  @click.stop="onSearch" style="color:#666!important;">搜索</div>
        <div slot="action" v-else  style="color:#666!important;">搜索</div>
      </van-search>
    </div>

		<div class="member-content">
      <!--:offset="offset"-->
      <van-list
        v-model="loading"
        :finished="finished"
        @load="getMemberList"
      >
        <div v-if="typeof memberList=='string'" class="member-nodata" >{{memberList}}</div>
        <van-row v-else v-for="(m,index) in memberList" :key="index" class="member-lists"  @click.native="details(m.vip_id,m.photo,m.vip_name,m.sex,m.phone,m.birth_date,m.level)">
          <van-col span="6">
            <img v-if="m.photos==0" class="imgDivs"  :src="memberDetails.imgaes+''+m.photo">
            <img v-else class="imgDivs"  src="../../images/noimg.jpg" alt="">
          </van-col>
          <van-col span="18">
            <van-row class="m-c-r" >
              <van-col span="24" style="padding:3px 0;color:#666">
                <span class="member-names" >{{m.vip_name}}</span>
                <span v-if="m.sex==0"><i class="iconfont icon-nan" style="color:#31A8E0!important;"></i></span>
                <span v-else-if="m.sex==1"><i class="iconfont icon-nv" style="color:#FF78DA!important;"></i></span>
                <span v-else ><!--<i class="iconfont icon-nan"></i>-->(保密)</span>
              </van-col>
              <van-col span="12" class="m-r-c" >
                <i class="iconfont icon-shouji1"></i> {{m.phone}}
              </van-col>
              <van-col span="12" class="m-r-c">
                <i class="iconfont iconI  icon-shengri"></i>{{m.birth_date}}
              </van-col>
              <van-col span="24" class="m-r-c">
                <i class="iconfont iconI icon-dengji"></i>{{m.level_name}}
              </van-col>
            </van-row>
          </van-col>
        </van-row>
        <div class="noDatas" :style="{display:block}">
            数据已加载完
        </div>
      </van-list>


		</div>

    <!--返回按钮-->
    <van-button class="member-back" @click="backFn">
      <i class="iconfont icon-icon_reply" style="display: block"></i>
      返回
    </van-button>

		<div class="member-footer">
			<p>
				共<span>{{totalss}}</span>人
			</p>
		</div>


	</div>



</template>

<script type="text/javascript">
	import { mapState } from 'vuex';

	export default {
		name:"member",
		data(){
			return {
            value:"",
            block:"",
            list: [],
            loading: false,
      			finished: false,
            offset:200,
      			memberList:[],
      			currentPage:1,
      			pagesize:10,
      			total:0,
      			totalss:0,
            searchStatus:0,
			}
		},
		computed: {
		    ...mapState({
		    	memberDetails:"data"
		    })
		},
		methods: {
        //返回
        backFn(){
          // this.$router.go(-1);
          this.$router.push({ name: "home"});
        },
		    onSearch:function(){
          this.memberList=[];
          this.currentPage=1;
          this.searchStatus=1;
          this.finished=false;
          this.loading=true;
          this.getMemberList();



		    },
		    getMemberList(){
		    	var $this=this;
		    	this.$http.member.get('/vip',{
		    	  params:{
              crux: $this.value,
              page:$this.currentPage,
              pageSize:$this.pagesize
            }
          })
	            .then(function (response) {
                var empId = localStorage.getItem('empId')
	              if(empId&&response.data.code){
                  $this.$toast.fail(response.data.message);
                  $this.$router.go(-1)
	                return;
                }

                if(!response.data.code){
                  $this.currentPage=response.data.data.current_page+1;
                  //总人数
                  $this.totalss=response.data.data.total;
                  // console.log(response);
                  var len=0;
                  for(var i in response.data.data.data) {
                    len++;
                    if(response.data.data.data[i].photo==''){
                      response.data.data.data[i].photos=1;
                    }else{
                      var timestamp = (new Date()).getTime();
                      response.data.data.data[i].photos=0
                      response.data.data.data[i].photo=response.data.data.data[i].photo+'?c='+timestamp
                    }
                    $this.memberList.push(response.data.data.data[i]);
                  }
                  $this.loading = false;
                  // console.log($this.memberList)
                  if(!len){
                    $this.finished = true;
                    $this.memberList="未找到相关数据";
                  }else if ($this.memberList.length >= response.data.data.total) {
                    $this.finished = true;
                    $this.block = 'block'
                  }

                  $this.searchStatus=0;

                }

                if(response.error){
                  console.log(response.errey)
                }

	            })
	            .catch(function (error) {
                $this.$toast.fail('登陆过期，请重新登陆');

                  // location.reload()
	            });

		    },
        //点击进入会员详情
		    details(userid,photos,name,sex,phone,birth,level){

          var idx=photos.indexOf("accessory");
          if(idx==-1){

            this.memberDetails.touXiang = 1;
          }else{
            this.memberDetails.touXiang = photos;
          }
		    	this.memberDetails.memberID = userid;

          this.memberDetails.vipName =name;
          this.memberDetails.phone = phone;
          this.memberDetails.birth = birth;
          this.memberDetails.dengJi = level;
          this.memberDetails.sex = sex;

		    	this.$router.push({name: 'memberDetails',params:{
		    	  url:"member",
		    	  vipId:userid
		    	}});
		    }

		  },
		  mounted(){
		  	// this.getMemberList();
		  }

	}
</script>

<style type="text/css">
	.member{
    background: #fff;
	}
  .member-header{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    z-index: 99;
  }
  .member-header .van-cell{
    flex: initial!important;
    width:85%!important;
  }
	.member-searchs{
		width:100%;
		position: fixed;
		top:0;
		left:0;
		background: #F2F2F2;
		z-index: 999;
	}
	.search{
	    box-sizing: border-box;
	  }
	.van-search{
	    box-sizing: border-box;
	    padding:6px 15px;
	}
	.van-search__action {
	    margin-left: 10px;
	}

	.member-footer{
		width:100%;
		box-sizing: border-box;
    border-top:1px solid #ddd;
		position: fixed;
		bottom:0;
		left:0;
		z-index:99999;
		background: #fff;

	}
  .member-back{
    position: fixed!important;
    bottom:100px!important;
    right:10px!important;
    background:rgba(0,0,0,.5)!important;
    width:55px!important;
    height:auto!important;
    color:#fff!important;
    font-size:12px!important;
    padding:12px 0!important;
    border-radius: 5px!important;
    line-height: initial!important;
    border:0!important;
  }

	.member-footer>p{
		margin:5px 0;
		text-align: center;
    font-size:14px;
	}
	.member-footer>p>span{
		color:#0D90EB;
	}
	.member-content{
		margin-bottom:30px;
		margin-top:46px;
    font-size:14px;
    color: #2c3e50;
    /*background: skyblue;*/
	}
  .member p{
    font-size:14px;
    color: #2c3e50!important;
  }
	.member-list{
		border-bottom:1px solid #ddd;
		padding:10px ;
		display: flex;
    margin:3px 0;
	}
	.member .imgDivs{
		width:70px!important;
    border-radius: 50%;
		height:70px;
		position: relative;
		text-align: center;
    margin:8px 0;
	}
  .member .iconfont{
    font-size:12px!important;
    /*color:#666!important;*/
  }
	.iconI{
		font-size:12px;
		margin-right:5px;
	}
	.member-list>.imgDiv>.imgIcons{
		font-size:30px;
	}
	.member-list>.imgDiv>p{
		background: rgba(0,0,0,.5);
		color:#fff;
		position: absolute;
		bottom:0;
		left:0;
		margin:0;
		padding: 0;
		width:100%;
		/*height: 50px;*/
	}
  .member-list p{
    font-size:12px!important;
  }
	.member-list>div{
		width:80%;
		padding:0 10px 0 30px;
    font-size:12px;
	}
	.list-p,.list-p2{
		margin:0;
		text-align: left;
	}
	.list-p{
		margin:5px 0;
		color:#2c3e50;
	}
	.list-p2{
		display: flex;
	}
	.leftText{
		width:60%;
		margin:0;
		float: left;
	}
	.rightText{
		width:40%;
		margin:0;
		float: right
	}
	.rightText>span{
		margin:0;
		width:90%;
		display: block;
		text-align: left;
		margin:5px 0;
	}
	.leftText>span{
		width:100%;
		display: block;
		text-align: left;
		margin:5px 0;
	}
	.member .van-icon {
	    font-size: 12px;
	   	margin-right:5px;
	}
	.backPrev{
		border:1px solid ;
		position:fixed;
		bottom:0;
		right:0;
		width:;
	}
	.memberIcon{
		font-size:12px;
		margin-right:10px;
	}
  .icon-nan{
    color:skyblue;
  }
  .icon-nv{
    color:#625161;
  }

  .member-nodata{
    color:#ddd;
    padding:10px 0;
  }
  .member-lists{
    padding:5px 0;
    border-bottom:1px solid #ddd;
    background: #fff;
    margin:5px 0;
  }

  .m-c-r{
    text-align: left;
    font-size: 12px;
    color:#AFAFAF;
    padding:0 10px 0 20px;
  }
  .m-r-c{
    padding:1px 0;
    font-size:14px;;
  }
  .member-names{
    font-weight: bold;font-size:14px;
  }

</style>
